/* eslint-disable @next/next/no-img-element */ import { useSession } from "next-auth/react"; import Head from "next/head"; import { UserNav } from "~/components/UserNav"; import { Button } from "~/components/ui/button"; import * as Table from "~/components/ui/table"; import { api } from "~/utils/api"; import { useRouter } from "next/router"; import { format } from "date-fns"; import Link from "next/link"; import { useState } from "react"; import type { WineBottle } from "@prisma/client"; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogPortal, DialogTitle, } from "~/components/ui/dialog"; import { Popover, PopoverTrigger } from "~/components/ui/popover"; import { cn } from "~/lib/utils"; import { CalendarIcon } from "lucide-react"; import { PopoverContent } from "@radix-ui/react-popover"; import { Calendar } from "~/components/ui/calendar"; import { Textarea } from "~/components/ui/textarea"; import { Label } from "~/components/ui/label"; import { wineries } from "~/lib/data"; import { ScrollArea } from "~/components/ui/scroll-area"; import { Input } from "~/components/ui/input"; export default function Home() { const { data: session } = useSession({ required: true }); const router = useRouter(); const [showConsumed, setShowConsumed] = useState(true); const wineId = router.query.wineId as string; const { data: wine } = api.wine.getWine.useQuery( { id: wineId ? parseInt(wineId) : 0 }, { enabled: !!wineId }, ); const wineBottles = wine?.wineBottles.filter( (w) => showConsumed || !w.consumed, ); const utils = api.useUtils(); const deleteWineBottle = api.wine.deleteWineBottle.useMutation(); const handleDeleteWineBottle = async (id: number) => { utils.wine.getWine.setData( { id: wineId ? parseInt(wineId) : 0 }, (prev) => { if (!prev) return prev; return { ...prev, wineBottles: prev.wineBottles.filter((b) => b.id !== id), }; }, ); await deleteWineBottle.mutateAsync({ id }); }; const [consumingWineBottle, setConsumingWineBottle] = useState< (WineBottle & { edit?: boolean }) | null >(null); const editBottle = api.wine.editWineBottle.useMutation(); const handleConsumeWineBottle = async () => { if (!consumingWineBottle) return; utils.wine.getWine.setData( { id: wineId ? parseInt(wineId) : 0 }, (prev) => { if (!prev) return prev; return { ...prev, wineBottles: prev.wineBottles .map((wine) => { if (wine.id === consumingWineBottle.id) { return consumingWineBottle; } return wine; }) .sort((a, b) => a.counter - b.counter), }; }, ); void editBottle.mutateAsync({ ...consumingWineBottle }); setConsumingWineBottle(null); }; const [addWineBottleData, setAddWineBottleData] = useState<{ note: string; quantity: number; } | null>(null); const [addingWineBottle, setAddingWineBottle] = useState(false); const addWineBottle = api.wine.addBottle.useMutation(); const handleAddWineBottle = async () => { if (!addWineBottleData) return; setAddingWineBottle(true); await addWineBottle.mutateAsync({ id: wineId ? parseInt(wineId) : 0, ...addWineBottleData, }); await utils.wine.getWine.invalidate({ id: wineId ? parseInt(wineId) : 0, }); setAddingWineBottle(false); setAddWineBottleData(null); }; const { data: version } = api.wine.getApplicationVersion.useQuery(); return ( <> Wine Demo App

{wine?.imageUrl ? ( {wine.name}

) : (

)}

{wine?.name}

{wine?.year} {wine?.type} •{" "} {wine?.wineryKey ? wineries.find((winery) => winery.key === wine?.wineryKey) ?.name ?? "" : ""}

{wine?.rating} Rating

{wine?.note}

A list of your wines ID Date Created Consumed Date Consumed Note Actions {wineBottles?.map((bottle, index) => ( {bottle.counter} {format(bottle.createdAt, "PPP")} {bottle.consumed ? "Yes" : "No"} {bottle.dateConsumed ? format(bottle.dateConsumed, "PPP") : "N/A"} {bottle.note} ))}